<template>
    
    <div class="create-radio">
        <span>单选题</span>
        <n-input type="textarea" placeholder="设置题目" clearable class="set-title" v-model:value="radioData.title" />
        <!-- 分值 -->
        <label class="score">
            <span>分值:</span>
            <n-input-number placeholder="分值" :min="0" :max="10" v-model:value="radioData.score" />
        </label>
        <!-- 整个选项框 -->
        <n-radio-group v-model:value="radioData.answer" class="options">
            <!-- 每一条选项 -->
            <div v-for="(item, index) in topicOption" :key="index" class="option">
                <!-- 选项框A B C D-->
                <el-tooltip effect="light" content="设为答案" placement="left">
                    <n-radio :value="item.option">
                        <span>{{ item.option }}</span>
                    </n-radio>
                </el-tooltip>
                <!-- 输入框 -->
                <n-input v-model:value="item.text" type="text" placeholder="选项" class="option-text" clearable />
                <!-- 删除图标 -->
                <img src="/src/assets/svg/delete1.svg" class="delete-img" @click="deleteOption(item, index)" />
            </div>
        </n-radio-group>
        <!-- 添加选项按钮 -->
        <p class="add-option" @click="onAddOption()">+ 添加选项</p>
    </div>
</template>

<script setup>
import { ref } from "vue";
import { openInfo } from "@/utils/openInfo";

const props = defineProps(['radioData'])

// 单选题数据
const radioData = props.radioData

// 单选题选项
const topicOption = ref([
    { option: "A", text: "" },
    { option: "B", text: "" },
    { option: "C", text: "" },
    { option: "D", text: "" },
]);

// 获取选项和选项值
radioData.options = topicOption.value

//删除选项
function deleteOption(value, index) {
    if (topicOption.value.length <= 3) {
        openInfo("单选题最少需要3个选项");
    } else {
        //   console.log("删除这个选项",value);
        let mapping = ["A", "B", "C", "D", "E", "F", "G", "H"];
        //从index处删除1个元素
        topicOption.value.splice(index, 1);
        mapping = mapping.slice(0, topicOption.value.length);
        for (let i = 0; i < topicOption.value.length; i++) {
            topicOption.value[i].option = mapping[i];
        }
    }

}
// 添加选项
function onAddOption() {
    if (topicOption.value.length >= 8) {
        openInfo("最多添加8个选项");
    } else {
        const mapping = { 0: "A", 1: "B", 2: "C", 3: "D", 4: "E", 5: "F", 6: "G", 7: "H" };
        //添加到数组
        topicOption.value.push({
            option: mapping[topicOption.value.length],
            text: "",
        });
    }
}

</script>

<style scoped>
/* 设置题目 */
.set-title {
    margin: 10px 0px 10px 0px;
}

/* 分值 */
.score {
    display: flex;
    align-items: center;
}

/* 分值二字文本 */
.score span {
    width: 40px;
    cursor: pointer;
}

/* 全部选项框 */
.options {
    width: 100%;
}

/* 单个选项框 */
.option {
    display: flex;
    align-items: center;
    margin-top: 10px;
}

/* 添加选项 */
.add-option {
    margin-top: 10px;
    cursor: pointer;
    user-select: none;
    font-style: italic;
    color: rgb(65, 63, 61, 0.8);
    transition: color 0.3s ease, text-decoration 0.3s ease, font-size 0.3s ease;
}

.add-option:hover {
    color: rgba(22, 112, 112, 0.8);
    text-decoration: underline dashed;
    font-size: 15px;
}

/* 删除选项图标 */
.delete-img {
    margin-left: 10px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.delete-img:hover {
    transform: scale(1.2);
}
</style>